<template>
  <div class="my-customization">
    <div>
        <leftMenu></leftMenu>
    </div>
    
    <div class="right-content">
        <breadcrumbTag></breadcrumbTag>
        <div class="flex">
          <!-- <div v-for="(item, index) in prolist" :key="index" @click="onMyHead(item, index)" class="my-head-list"> -->
            <!-- <el-tooltip class="item" effect="dark" :content="item" placement="top-start"> -->
            <div v-for="(item, index) in prolist" :key="index" @click="onMyHead(item, index)" :class="myHeadIndex == index ? 'my-head action' : 'my-head'">{{ item }}</div>
            <!-- </el-tooltip> -->
          <!-- </div> -->
        </div>
        <el-form ref="customizedParams" :model="customizedParams" :inline="true" size="small" :rules="rules" class="data-form">
          <div class="my-content">
            <div class="flex flex-1">
              <div v-if="myHeadName" class="flex-1">
                <div class="title"><img src="../../../public/image/icon.png" alt="" width="15px" style="margin-right: 10px" /> {{ myHeadName }}</div>
                <div class="table-list flex data-list">
                  <div class="flex-1 flex flex-c">
                    <div class="table-content">
                      <div class="table-tr flex" v-for="(row, index) in Object.keys(dataView.prolist[myHeadIndex][myHeadName])" :key="index">
                        <template v-if="row != 'jwdfw' && row != 'showtype'">
                          <div>{{ row }}</div>
                          <div>{{ dataView.prolist[myHeadIndex][myHeadName][row] }}</div>
                        </template>
                      </div>
                      <!-- <div  class="table-tr flex">
                          <div>描述</div>
                          <div>{{ dataView.prolist[myHeadIndex][myHeadName]['描述'] }}</div>
                        </div>
                        <div   class="table-tr flex">
                          <div>关键词</div>
                          <div>{{ dataView.prolist[myHeadIndex][myHeadName]['关键词'] }}</div>
                        </div>
                        <div  class="table-tr flex" >
                          <div>数据量</div>
                          <div>{{ dataView.prolist[myHeadIndex][myHeadName]['数据量'] }}</div>
                        </div>
                        <div  class="table-tr flex">
                          <div>更新频率</div>
                          <div>{{ dataView.prolist[myHeadIndex][myHeadName]['更新频率'] }}</div>
                        </div>
                        <div class="table-tr flex" >
                          <div>最新更新时间</div>
                          <div>{{ dataView.prolist[myHeadIndex][myHeadName]['最新更新时间'] }}</div>
                        </div> -->
                    </div>
                  </div>
                  <div class="customized-top-right">
                    <div class="flex flex-cs flex-sb" v-if="dataView.spatialscaleName ||  dataView.spatialscale">
                      <div>
                        <div class="title" v-if="dataView.spatialscaleName">{{ dataView.spatialscaleName }}</div>
                        <div class="content" v-if="dataView.spatialscale">{{ dataView.spatialscale }}</div>
                      </div>
                      <img src="../../../public/image/quanqiu.png" alt="" width="40px" />
                    </div>
                    <div class="flex flex-cs flex-sb" v-if="dataView.spatialresoName || dataView.spatialreso">
                      <div>
                        <div class="title" v-if="dataView.spatialresoName">{{ dataView.spatialresoName }}</div>
                        <div class="content" v-if="dataView.spatialreso">{{ dataView.spatialreso }}</div>
                      </div>
                      <img src="../../../public/image/fen.png" alt="" width="40px" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="title"><img src="../../../public/image/icon.png" alt="" width="15px" style="margin-right: 10px" /> 数据定制</div>
            <div class="flex" style="padding: 10px">
              <div>
                <div :class="iframeStatus ? 'mapbg' : 'padbg'">
                  <!-- <div :class="iframeStatus ? 'map iframeFalse1' : 'iframeTrue map'" v-if="dataViewShowType == 2">
                    <wizMap ref="wizmapMe" mapId="mapid2" @handlerMapChane="handlerMapChane"></wizMap>
                    <div class="full-screen" size="small" v-if="iframeStatus" @click="iframeClick"><img src="../../../public/image/mapButton.png" alt="" width="14px" style="margin: 2px 5px 0 0" /> 区域选择</div>
                  </div> -->
                  
                  <div :class="iframeStatus ? 'iframeFalse map' : 'iframeTrue map'">
                    <wizMap ref="wizmapMe" mapId="mapid1" @handlerMapChane="handlerMapChane"></wizMap>
                    <div class="full-screen" size="small" v-if="iframeStatus" @click="iframeClick"><img src="../../../public/image/mapButton.png" alt="" width="14px" style="margin: 2px 5px 0 0" /> 区域选择</div>
                  </div>
                </div>

                <!-- v-if="dataViewShowType == 3" -->
                <div v-if="dataViewShowType == 3">
                  <el-select v-model="weiixng" placeholder="请选择" style="width: 200px" value-key="series_name" @change="weixingChange">
                    <el-option v-for="item in weixingOptions" :key="item.key" :label="item.label" :value="item.value"> </el-option>
                  </el-select>
                </div>
              </div>
              <!-- 地图右侧内容 -->
              <div class="flex-1 flex flex-c">
                <div style=" padding-left: 10px">
                    <div style="background-color: #FBFCFF;" >
                      <div class="steps"><div><span></span>订阅数据时间</div></div>
                      <div style="padding: 10px;">
                          <el-radio v-model="customizedParams.timetype" :label="1" @change="fileListInifRadioChange">长期</el-radio>
                          <el-radio v-model="customizedParams.timetype" :label="2" @change="fileListInifRadioChange">时间范围</el-radio>
                      </div>
                      <div style="height: 35px">
                        <div v-show="customizedParams.timetype == 2" class="flex time-type">
                            <el-form-item label="开始时间：" label-width="80px" class="flex-1" style="margin: 0;">
                              <el-date-picker v-model="customizedParams.startime" type="date" placeholder="选择日期" style="width: 120px" value-format="yyyy年MM月dd日" @change="(val) => timeChange(val)"> </el-date-picker>
                            </el-form-item>
                            <el-form-item label="结束时间：" label-width="80px" class="flex-1" style="margin: 0;">
                              <el-date-picker v-model="customizedParams.endtime" type="date" placeholder="选择日期" style="width: 120px" value-format="yyyy年MM月dd日" @change="(val) => timeChange(val)"> </el-date-picker>
                            </el-form-item>
                        </div>
                      </div>
                    </div>
                    <div v-for="(item, index) in stepsList" :key="index +'steps'" class="flex-1" style="margin-top: 10px;background-color: #FBFCFF;">
                        <div class="steps">
                            <div><span></span>{{ item }}</div>
                            <el-checkbox :key="index + 'q'" @change="(val) => qxChange(val, item)">全选</el-checkbox>
                        </div>
                        <div v-for="(pitem, index) in partListSteps" :key="index + 'ps'">
                          <template v-if="pitem.hasOwnProperty(myHeadName)">
                            <div v-for="(citem, index) in Object.keys(pitem[myHeadName])" :key="index + 'ste'">
                              <template v-if="citem == item">
                                <!-- {{ pitem[myHeadName][citem] }} -->
                                <el-checkbox-group v-model="customizedParams.jsonDate[citem]" :key="citem + 'k'">
                                      <div v-for="(row, index) in pitem[myHeadName][citem]" :key="index + 'che'">
                                          <template v-if="row.length > 8">
                                            <el-tooltip effect="dark" :content="row" placement="top-end"  >
                                                <el-checkbox :label="row" name="type"></el-checkbox>
                                            </el-tooltip>
                                          </template>
                                          <template v-else>
                                            <el-checkbox :label="row" name="type"></el-checkbox>
                                          </template>
                                      </div>
                                      <!-- <el-checkbox v-for="row in pitem[myHeadName][citem]" :key="row" :label="row" name="type"></el-checkbox> -->
                                </el-checkbox-group>
                              </template>
                            </div>
                          </template>
                        </div>
                    </div>
                    <!-- <template v-if="dataViewShowType != 3">
                      <template v-if="stepsIndex === 0">
                        <el-form-item label="订阅数据时间：" class="flex" style="margin: 0">
                          <el-radio v-model="customizedParams.timetype" :label="1" @change="fileListInifRadioChange">长期</el-radio>
                          <el-radio v-model="customizedParams.timetype" :label="2" @change="fileListInifRadioChange">时间范围</el-radio>
                        </el-form-item>
                        <template v-if="customizedParams.timetype == 2">
                          <el-form-item label="开始时间：" label-width="100px" class="flex" style="margin: 0">
                            <el-date-picker v-model="customizedParams.startime" type="date" placeholder="选择日期" style="width: 150px" value-format="yyyy-MM-dd" @change="(val) => timeChange(val)"> </el-date-picker>
                          </el-form-item>
                          <el-form-item label="结束时间：" label-width="100px" class="flex" style="margin: 10px 0 0 0;">
                            <el-date-picker v-model="customizedParams.endtime" type="date" placeholder="选择日期" style="width: 150px" value-format="yyyy-MM-dd" @change="(val) => timeChange(val)"> </el-date-picker>
                          </el-form-item>
                        </template>
                      </template>
                      <template v-if="stepsIndex > 0">
                        <div v-for="(item, index) in partListSteps" :key="index + 'ps'">
                          <template v-if="item[myHeadName]">
                            <div v-for="(citem, index) in Object.keys(item[myHeadName])" :key="index + 'ste'">
                              <template v-if="citem == stepsName">
                                <el-checkbox-group v-model="customizedParams.jsonDate[citem]" :key="citem + 'k'">
                                  <el-checkbox v-for="row in item[myHeadName][stepsName]" :key="row" :label="row" name="type"></el-checkbox>
                                </el-checkbox-group>
                              </template>
                            </div>
                          </template>
                        </div>
                      </template>
                    </template>
                    <template v-if="dataViewShowType == 3">
                      <div v-for="(citem, index) in weiixng.satellites" :key="index + 'ste'">
                        <template v-if="index == stepsIndex">
                          <el-checkbox-group v-model="customizedParams.jsonDate[citem.name]">
                            <el-checkbox v-for="row in citem.products" :key="row" :label="row" name="type"></el-checkbox>
                          </el-checkbox-group>
                        </template>
                      </div>
                    </template> -->
                </div>
              </div>
            </div>
            <div class="title"><img src="../../../public/image/icon.png" alt="" width="15px" style="margin-right: 10px" /> 数据订阅</div>
          <div style="padding: 10px">
            <el-tabs v-model="customizedParams.datatype" style="height: 300px; padding: 0 20px">
              <el-tab-pane label="军综网" name="1" >
                <div class="flex">
                  <el-form-item label="FTP地址：" label-width="100px" class="flex flex-1" prop="ipaddr">
                    <el-input v-model="customizedParams.ipaddr" placeholder="请输入FTP地址"></el-input>
                  </el-form-item>
                  <el-form-item label="端口号：" label-width="100px" class="flex flex-1" prop="protno">
                    <el-input v-model="customizedParams.protno" placeholder="请输入端口号"></el-input>
                  </el-form-item>
                </div>
                <div class="flex">
                  <el-form-item label="用户名：" label-width="100px" class="flex flex-1" prop="account">
                    <el-input v-model="customizedParams.account" placeholder="请输入用户名"></el-input>
                  </el-form-item>
                  <el-form-item label="密码：" label-width="100px" class="flex flex-1" prop="password">
                    <el-input type="password" v-model="customizedParams.password" placeholder="请输入密码"></el-input>
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="路径：" label-width="100px" class="flex" prop="url" style="width: 100%">
                    <div class="flex">
                      <el-input v-model="customizedParams.url" placeholder="请输入路径"  style="width: 250px"></el-input>
                      <span class="text" style="margin-left: 20px">提示：请提前创建该目录，并确保FTP帐号对此目录具有写权限</span>
                    </div>
                  </el-form-item>
                </div>
              </el-tab-pane>
              <el-tab-pane label="指挥专网" name="2" >
                <div>
                  <el-form-item label="请提供长报文服务地址：" label-width="200px" class="flex" prop="lmsa">
                    <el-input v-model="customizedParams.lmsa" placeholder="请输入请提供长报文服务地址" style="width: 300px"></el-input>
                  </el-form-item>
                  <el-form-item label="接收端路径：" label-width="200px" class="flex" prop="lmasurl">
                    <el-select v-model="customizedParams.lmasurl" placeholder="请选择" @change="lmasurlChange" style="width: 200px">
                      <el-option v-for="item in optionsList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                    <span class="text" style="margin-left: 10px">提示：请确保在接收端提前创建该目录</span>
                    <div class="flex" v-if="lmasurlStatus" style="margin-top: 20px">
                      <el-input v-model="addLmasurl" placeholder="请输入接收端路径" style="width: 200px; margin-right: 10px"></el-input>
                      <el-button type="primary" @click="addLmasurlClick">确认</el-button>
                    </div>
                  </el-form-item>
                  <div class="text">
                    <div style="padding-left: 35px">
                      <p>提示：</p>
                      <p>请接收端安装气象水文软件端包（数据接收软件和数据处理软件）</p>
                      <p>并配置安防系统开放开发送端长报文服务地址： 1.199.16.40/41/65/66，端口：5555、5556</p>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="footer-button" style="text-align: end">
            <el-button type="primary" @click="saveClick">预览</el-button>
            <el-button @click="resetClick">重置</el-button>
          </div>
        </div>

        
        </el-form>
    </div>


    <el-dialog title="订阅详情" :visible.sync="dialogVisible" width="40%" top="3%" :before-close="handleClose">
      <div>
        <dataViewParams ref="dataViewParams"></dataViewParams>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="addShoppingCart">加入购物车</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import wizMap from "@/components/wizMap/wizMap.vue";
import dataViewParams from "@/components/dataView.vue";
import leftMenu from "@/components/leftMenu.vue";
import { mapState } from "vuex";
import breadcrumbTag from '@/components/breadcrumbTag.vue'

export default {
  name: "myCustomization",
  components: {
    wizMap,
    dataViewParams,
    leftMenu,
    breadcrumbTag
  },
  props: {
    viewType: {
      type: String,
      default: "edit",
    },
  },
  computed: {
    ...mapState(["menuItem"]),
  },
  watch: {
      menuItem(newVal, oldVal) {
        // console.log(newVal, oldVal, 'watchMenuItem');
          if (newVal) {
              this.dataInfo(newVal.id);
          }

      },
  },
  data() {
    let _this = this;
    return {
      componentStatus: false,
      myHeadIndex: 0,
      myHeadName: "",
      stepsIndex: 0,
      badgeNum: 0,
      flexTableid: 1,
      queryId: 1,
      dataCustomizedShow: false,
      iframeStatus: true,
      dialogVisible: false,
      iframeContent: "",
      elementTabPosition: "",
      addLmasurl: "",
      startTime: "",
      endTime: "",
      partListSteps: [
        {
          中国地面逐小时资料: {},
        },
      ],
      stepsList: [],
      prolist: [],
      dataViewShowType: 2,
      mapDataParmas:{ //地图
          mapView: [[105, 36], 3],
          isShowPane: true,
          // dataView: this.dataView,
          paneType: 1,
          showtype: 1, //1 不带测绘  2测绘数据
          jwdfw: [],
          bakView: '',
          paneType: '',
      },
      dataView: {
        filedetails: "",
        keyword: "",
        rate: "",
        number: "",
        receiveTime: "",
        prolist: [
            // {
            //     "国家站逐小时观测": {
            //         "描述": "包括地面2400站国家站逐小时观测数据，要素包括地面2米气温、2米地面相对湿度、10分钟风、2分钟风、能见度，逐小时更新",
            //         "更新频率": "1小时",
            //         "数据量": "全国2438站点",
            //         "最新更新时间": "2024-12-14 13:00"
            //     }
            // },
            // {
            //     "区域站逐小时观测": {
            //         "描述": "包括地面7万站全国区域站逐小时观测数据，要素包括地面2米气温、2米地面相对湿度、10分钟风、2分钟风、能见度",
            //         "更新频率": "1小时",
            //         "数据量": "全国72356站点",
            //         "最新更新时间": "2024-12-14 13:00"
            //     }
            // },
            // {
            //     "军内地面逐小时观测": {
            //         "描述": "包括军内1000站逐小时观测数据，要素包括地面2米气温、2米地面相对湿度、10分钟风、2分钟风、能见度",
            //         "更新频率": "1小时",
            //         "数据量": "全国1204站点",
            //         "最新更新时间": "2024-12-14 13:00"
            //     }
            // }
        ],
        spatialscaleName: "",
        spatialscale: "",
        spatialresoName: "",
        spatialreso: "",
      },
      siteOptions: [],
      weixingOptions: [],
      weiixng: {
        series_name: "",
        satellites: [],
      },
      optionsList: [
        { label: "/RecvData/fub", value: "/RecvData/fub" },
        { label: "/RecvData/htb", value: "/RecvData/htb" },
        { label: "/RecvData/grib", value: "/RecvData/grib" },
        { label: "/RecvData/hyz", value: "/RecvData/hyz" },
        { label: "/RecvData/kj", value: "/RecvData/kj" },
        { label: "/RecvData/kjsk", value: "/RecvData/kjsk" },
        { label: "/RecvData/ldsw", value: "/RecvData/ldsw" },
        { label: "新建目录", value: "add" },
      ],
      props: {
        multiple: true,
        checkStrictly: true,
        lazy: true,
        lazyLoad(node, resolve) {
          const { level, data } = node;
          console.log(node);
          let list = [];
          for (let index = 0; index < 20; index++) {
            list.push({ value: index, label: `${node.label}AA${index + 1}`, leaf: level >= 1 });
          }
          resolve(list);
          // if (data.key){
          //     _this.$http.post(`/area/list?code=${data.key}`).then(res => {
          //         if(res.code == 200) {
          //             let data = res.data || []
          //             let siteOptions = data.map(item => {
          //                 return {
          //                     value: item.name,
          //                     key: item.code,
          //                     label: item.name,
          //                     leaf: level >= 2
          //                 }
          //             })
          //             resolve(siteOptions)
          //         } else {
          //             _this.$message.error(res.message)
          //         }
          //     }).catch(err => {
          //         _this.$message.error(err.message)
          //     })
          // }
        },
      },
      listObjectStatus: false,
      lmasurlStatus: false,
      fileListInif: {
        定制范围: [],
        要素列表: [],
        订阅数据时间: [],
        L1通道选择: [],
        L2产品选择: [],
        卫星选择: [],
        地面要素: [],
        高空层次: [],
        高空要素: [],
      },
      elementListInfo: {},
      fileDataInif: ["要素列表", "定制层次"],
      customizedParams: {
        datatype: '1',
        range: "地图选择", 
        scope: "", // 范围
        // type: 1, //1气象数据 2测绘数据
        timetype: 1,
        isexamine: 1, //1未审核 2审核通过 3审核拒绝
        dataViewName: "",
        jsonDate: {
          dataViewName: '',
          dataView: "", // 表头数据
          mapPosition: "", // 地图数据
          订阅数据时间: ["长期"],
          // 定制范围: [],
          // 订阅时次: [],
          // 时效: [],
          // 要素列表: [],
          // 站点选择: [],
          // L1通道选择: [],
          // L2产品选择: [],
          // 卫星选择: [],
          // 地面要素: [],
          // 高空层次: [],
          // 高空要素: [],
          // 标志列表: [],
          // 质控码列表: [],
          // 静止卫星: [],
          // 极轨卫星: [],
          // 其他卫星: [],
          // 观测时间: [],
          // 参数选择: [],
          // 预报层次: [],
          // 预报时效: [],
          // 时次选择: [],
        },
        fileid: "",
        datelong: "",
        account: "user",
        password: "user",
        protno: "21",
        url: "/data",
        ipaddr: "21.17.240.181",
        filename: "",
        startime: "",
        endtime: "",
        crearetime: "",
        lmsa: "",
        lmasurl: "",
      },
      rules: {
        lmsa: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 2) {
                callback(new Error("请输入请提供长报文服务地址"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        lmasurl: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 2) {
                callback(new Error("请输入接收端路径"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        account: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 1) {
                callback(new Error("请输入用户名"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 1) {
                callback(new Error("请输入路径"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 1) {
                callback(new Error("请输入输入密码"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        ipaddr: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 1) {
                callback(new Error("请输入FTP地址"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        protno: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === "" && this.customizedParams.datatype == 1) {
                callback(new Error("请输入端口号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    // this.dataViewShowType = this.$route.query.showType
  },
  mounted() {
    // 获取 vuex 数据
    this.$store.getters.badgeNum;
    // 查看还是编辑
    this.dataInfo(this.$store.getters.menuItem.id);
   

 

    // // 站点选择数据
    // this.$http.post('/area/list?code=000000').then(res => {
    //     if(res.code == 200) {
    //         let siteOptions = res.data || []
    //         this.siteOptions = siteOptions.map(item => {
    //             return {
    //                 value: item.name,
    //                 key: item.code,
    //                 label: item.name,
    //             }
    //         })
    //     } else {
    //         this.$message.error(res.message)
    //     }
    // }).catch(err => {
    //     this.$message.error(err.message)
    // })
  },
  methods: {
    onMyHead(item, index) {
      this.myHeadIndex = index;
      this.myHeadName = item;
      // 初始化
      this.stepsIndex = 0;
      this.customizedParams.timetype = 1;
      this.customizedParams.startime = "";
      this.customizedParams.endtime = "";
      // this.customizedParams.jsonDate = {
      //   dataViewName: '',
      //   dataView: "", // 表头数据
      //   mapPosition: "", // 地图框选数据
      //   订阅数据时间: ["长期"],
      // };
      this.stepsList = []
      this.partListSteps.forEach((item) => {
          if (item.hasOwnProperty(this.myHeadName)) {
            console.log(item, 'item');
            
            this.stepsList = Object.keys(item[this.myHeadName]);
          }
          // Object.keys(item).forEach((elitem) => {
          //   if (elitem == this.myHeadName) {
          //     // obj = item[elitem];
          //     Object.keys(item[elitem]).forEach((rowItem) => {
          //       row.push(rowItem);
          //     });
          //   }
          // });
        });
        console.log(this.stepsList, 'this.stepsList');
        
        setTimeout(() => {
          this.stepsList.forEach((item) => {
            this.$set(this.customizedParams.jsonDate, item, []);
          });
        },0);
    },
    onSteps(index) {
      this.stepsIndex = index;
    },
    dataInfo(id) {
          this.$http
            .post(`/fileList/pro/list?id=${id}`)
            .then((res) => {
              if (res.code == 200) {
                let data = res.data || [];
                let list = [];
                this.dataView = data;
                data.prolist.forEach((item) => {

                  list.push(...Object.keys(item));
                });
                this.prolist = list;
                this.myHeadName = this.prolist[0];
                this.customizedParams.filename = data.filename;
                // console.log(  data.prolist,  'this.prolist ');
                this.dataViewShowType = data.prolist[0][this.myHeadName].showtype || 2;
                // 加载卫星数据
                if (this.dataViewShowType == 3) {
                  this.dataWeiXing();
                }
                // this.dataViewShowType = 2;
                this.dataPartList(id);
              } else {
                this.$message.error(res.message);
              }
            })
            .catch((err) => {
              this.$message.error(err.message);
            });

        // let data = require("@/assets/json/datalist.json")[`dataView${this.$route.query.showType}`]
        // let list = [];
        // this.dataView = data;
        // data.prolist.forEach((item) => {
        //     list.push(...Object.keys(item));
        // });
        // this.prolist = list;
        // this.myHeadName = this.prolist[0];
        // this.dataViewShowType = data.prolist[0][this.myHeadName].showtype
        // this.customizedParams.filename = data.filename;
        // console.log( data,  this.myHeadName,    this.dataViewShowType, ' this.prolist ');
        
    },
   // 卫星选择数据
    dataWeiXing(type) {
        this.$http.post("/fileList/satellite/list").then((res) => {
            if (res.code == 200) {
              let weixingOptions = res.data || [];
              this.weixingOptions = weixingOptions.map((item) => {
                return {
                  value: item,
                  key: item.series_name,
                  label: item.series_name,
                };
              });
            } else {
              this.$message.error(res.message);
            }
          }).catch((err) => {
            this.$message.error(err.message);
          });
    },
    dataPartList(id) {
      this.$http
        .post(`/fileList/part/list?id=${id}`)
        .then((res) => {
          if (res.code == 200) {
            this.partListSteps = res.data || [];
            let row = [];
            this.partListSteps.forEach((item) => {

             if (item.hasOwnProperty(this.myHeadName)) {
                  console.log(item, 'item', this.myHeadName, item[this.myHeadName]);
                  row = Object.keys(item[this.myHeadName])
              }
            });
            // console.log(obj, 'obj');
            
            // this.stepsList = [...row];
            setTimeout(() => {
              this.stepsList = [...row];
              this.stepsList.forEach((item) => {
                this.$set(this.customizedParams.jsonDate, item, []);
              });
            },0);
          } else this.$message.error(res.message);
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
      // console.log(this.myHeadName, 'dataPartList');
      
      // this.partListSteps = require("@/assets/json/datalist.json").yaosulist
      // let row = [];
      // this.prolist
      // this.partListSteps.forEach((item) => {
      //     Object.keys(item).forEach((elitem) => {
      //         if (elitem == this.myHeadName) {
      //             Object.keys(item[elitem]).forEach((rowItem) => {
      //               row.push(rowItem);
      //             });

      //         }
      //     });
      // });
      // this.stepsList = [...row];

    },
    weixingChange(val) {
      // console.log(val, "weixingChange");
      this.stepsList = val.satellites.map((item) => {
        return item.name;
      });
      // this.stepsName = val.satellites[0];
      this.stepsList.forEach((item) => {
        this.customizedParams.jsonDate[item] = [];
      });
    },
    fileListInifRadioChange() {
      if (this.customizedParams.timetype == 1) {
        this.customizedParams.startime = "";
        this.customizedParams.endtime = "";
      }
    },
    // 全选
    qxChange(val, item) {
      // console.log(val, item, this.partListSteps, "qxChange");
      let objFled = this.partListSteps.find((item) => {
        return Object.keys(item)[0] == this.myHeadName;
      });
      if (val){
        this.customizedParams.jsonDate[item] = objFled[this.myHeadName][item]
      } else {
        this.customizedParams.jsonDate[item] = []
      }
    },
    // 预览
    saveClick() {
      // this.dialogVisible = true;
      // return
      let data = { ...this.customizedParams };
      // let validateStatus = false
      // if (this.customizedParams.scope == '') {
      //   this.$message.error("请选择地图范围");
      //   return
      // }
      
      let validateStatus = true
      // 判断是否选择时间
      if (this.dataViewShowType == 1 || this.dataViewShowType == 3){
        if (this.customizedParams.timetype == 2 ){
            if (!this.customizedParams.startime || !this.customizedParams.endtime) {
              this.$message.error("请选择开始时间和结束时间");
              return
            }
          }
          // 判断是否选择要素
          validateStatus = this.stepsList.every((item) => {
            if (data.jsonDate[item].length > 0) {
              return true;
            } else {
              this.$message.error(`${item} 不能为空`);
              return false;
            }
        });
      } else {
        this.customizedParams.jsonDate['订阅数据时间'] = []
      }
   

      if (validateStatus) {
        this.$refs["customizedParams"].validate((valid) => {
          if (valid) {
            data.dataViewName = this.myHeadName;
            // this.customizedParams.
            data.jsonDate.dataView = this.dataView.prolist[this.myHeadIndex];
            this.dialogVisible = true;
            console.log(data, "validateStatus");
            this.$nextTick(() => {
              this.$refs.dataViewParams.initParams(data);
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },
    // 加入购物车
    addShoppingCart() {
      let data = { ...this.customizedParams };
      // data.type = this.dataViewShowType;
      data.userid = sessionStorage.getItem("userid");
      data.username = sessionStorage.getItem("username");
      data.fileid = this.$store.getters.menuItem.id
      data.jsonDate.dataViewName = this.myHeadName;
      data.jsonDate = JSON.stringify(data.jsonDate);
      this.$http
        .post("/fileSubscribe/save", data)
        .then((res) => {
          if (res.code == 200) {
            this.dialogVisible = false;
            this.$message.success(res.message);
            // this.$router.push('/dataManagement')
            // this.dataCustomizedShow = false
            // let badgeNum = this.badgeNum + 1;
            this.$store.commit("setBadgeNum");
            // this.$store.getters.badgeNum;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          this.$message.error(err.message);
        });
    },
    timeChange(val, item, index) {
      // this.customizedParams.jsonDate['订阅数据时间'][index] = `${item}: ${val}`
      this.customizedParams.jsonDate["订阅数据时间"][0] = `${this.customizedParams.startime} - ${this.customizedParams.endtime}`;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    resetClick() {
      this.customizedParams = {
        datatype: "1", // 1 军综网 2 指挥局网
        scope: "",
        // type: 1, //1气象数据 2测绘数据
        timetype: 1,
        isexamine: 1, //1未审核 2审核通过 3审核拒绝
        dataViewName: "",
        jsonDate: {
          dataViewName: '',
          dataView: "", // 表头数据
          mapPosition: "", // 地图数据
          订阅数据时间: ["长期"],
          // 定制范围: [],
          // 订阅时次: [],
          // 时效: [],
          // 要素列表: [],
          // 站点选择: [],
          // L1通道选择: [],
          // L2产品选择: [],
          // 卫星选择: [],
          // 地面要素: [],
          // 高空层次: [],
          // 高空要素: [],
          // 标志列表: [],
          // 质控码列表: [],
          // 静止卫星: [],
          // 极轨卫星: [],
          // 其他卫星: [],
          // 观测时间: [],
          // 参数选择: [],
          // 预报层次: [],
          // 预报时效: [],
          // 时次选择: [],
        },
        fileid: "",
        datelong: "",
        account: "",
        password: "",
        protno: "",
        url: "",
        ipaddr: "",
        filename: "",
        startime: "",
        endtime: "",
        crearetime: "",
        lmsa: "",
        lmasurl: "",
      };
    },

    iframeClick() {
      this.iframeStatus = !this.iframeStatus;
      if (this.iframeStatus) {
        var obj = {
          mapView: [[105, 36], 3],
          isShowPane: this.iframeStatus,
          paneType: false,
          showtype: this.dataViewShowType, //1 不带测绘  2测绘数据
        };
        // const iframe = this.$refs.myIframe;

        // this.$refs.wizmapMe.mapData = obj;
        // iframe.contentWindow.postMessage(obj, "*");
      } else {
        var obj = {
          mapView: [[105, 36], 4],
          isShowPane: this.iframeStatus,
          // dataView: this.dataView,
          paneType: 1,
          showtype: this.dataViewShowType, //1 不带测绘  2测绘数据
          jwdfw: [
            [140, 0],
            [70, 0],
            [70, 60],
            [140, 60],
          ],
          bakView: '',
          // bakView: {
          //     //回显
          //     tableData: [
          //         {
          //             area: "中国区域",
          //             area2: "东部战区",
          //             area3: "",
          //             staNum: 10,
          //             resolution: "25*25",
          //             updatetime: "小时",
          //         },
          //         {
          //             area: "中国区域",
          //             area2: "矩形1",
          //             area3: " 东： 108.00 西：93.75 南：45.85   北：59.41   ",
          //             staNum: 20,
          //             resolution: "25*25",
          //             updatetime: "小时",
          //         },
          //         {
          //             area: "中国区域",
          //             area2: "圆形2",
          //             area3: "",
          //             staNum: 24,
          //             resolution: "25*25",
          //             updatetime: "小时",
          //         },
          //     ],
          //     geoArray: [
          //             {
          //                 矩形1: {
          //                 type: "Feature",
          //                 geometry: {
          //                     type: "Polygon",
          //                     coordinates: [
          //                     [
          //                         [93.7544928140828, 45.85140554115361],
          //                         [93.7544928140828, 59.414178174385576],
          //                         [107.9999693530994, 59.414178174385576],
          //                         [107.9999693530994, 45.85140554115361],
          //                         [93.7544928140828, 45.85140554115361],
          //                     ],
          //                 ],
          //             },
          //             properties: {
          //                     type: "RectAngle",
          //                     style: {
          //                         fill: {
          //                             fillColor: "rgba(254,30,22,0.4)",
          //                             opacity: 0.4,
          //                         },
          //                         stroke: {
          //                             strokeColor: "rgba(254,30,22,1)",
          //                             strokeWidth: 2,
          //                             strokeLineDash: null,
          //                         },
          //                         image: {
          //                             type: "",
          //                             image: {
          //                                 fill: {
          //                                     fillColor: "rgba(255,204,51,1)",
          //                                 },
          //                                 points: null,
          //                                 radius: 7,
          //                                 angle: 0,
          //                                 rotateWithView: false,
          //                             },
          //                         },
          //                     },
          //                     points: [
          //                         [93.7544928140828, 59.414178174385576],
          //                         [107.9999693530994, 45.85140554115361],
          //                     ],
          //                 },
          //             },
          //         },
          //         {
          //         圆形2: {
          //             type: "Feature",
          //             geometry: {
          //                 type: "Polygon",
          //                 coordinates: [
          //                 [
          //                     [129.70494446992987, 59.09642414252956],
          //                     [129.6711701151493, 60.171141537653256],
          //                     [129.56998034275585, 61.24161751421008],
          //                     [129.40177450255197, 62.303627392574505],
          //                     [129.167216426143, 63.35297990494279],
          //                     [128.86723180709714, 64.38553373635219],
          //                     [128.5030045476558, 65.39721386855909],
          //                     [128.07597208641243, 66.38402766227436],
          //                     [127.58781972539894, 67.34208061428656],
          //                     [127.04047397896869, 68.26759172728684],
          //                     [126.43609497072433, 69.156908431738],
          //                     [125.7770679084969, 70.00652100089773],
          //                     [125.0659936710202, 70.81307640210662],
          //                     [124.3056785434506, 71.57339152967621],
          //                     [123.49912314224171, 72.28446576715292],
          //                     [122.64951057308198, 72.94349282938035],
          //                     [121.76019386863082, 73.54787183762471],
          //                     [120.83468275563054, 74.09521758405496],
          //                     [119.87662980361834, 74.58336994506844],
          //                     [118.88981600990307, 75.01040240631183],
          //                     [117.87813587769617, 75.37462966575315],
          //                     [116.84558204628676, 75.67461428479902],
          //                     [115.79622953391848, 75.909172361208],
          //                     [114.73421965555406, 76.07737820141188],
          //                     [113.66374367899724, 76.17856797380531],
          //                     [112.58902628387354, 76.21234232858589],
          //                     [111.51430888874984, 76.17856797380531],
          //                     [110.44383291219302, 76.07737820141188],
          //                     [109.3818230338286, 75.909172361208],
          //                     [108.3324705214603, 75.67461428479902],
          //                     [107.2999166900509, 75.37462966575315],
          //                     [106.28823655784402, 75.01040240631183],
          //                     [105.30142276412873, 74.58336994506844],
          //                     [104.34336981211653, 74.09521758405496],
          //                     [103.41785869911625, 73.54787183762471],
          //                     [102.52854199466509, 72.94349282938035],
          //                     [101.67892942550536, 72.28446576715292],
          //                     [100.87237402429646, 71.57339152967621],
          //                     [100.11205889672688, 70.81307640210663],
          //                     [99.40098465925017, 70.00652100089773],
          //                     [98.74195759702275, 69.156908431738],
          //                     [98.13757858877838, 68.26759172728684],
          //                     [97.59023284234813, 67.34208061428656],
          //                     [97.10208048133465, 66.38402766227436],
          //                     [96.67504802009127, 65.39721386855909],
          //                     [96.31082076064995, 64.38553373635219],
          //                     [96.01083614160407, 63.3529799049428],
          //                     [95.7762780651951, 62.303627392574505],
          //                     [95.60807222499122, 61.241617514210084],
          //                     [95.50688245259778, 60.17114153765326],
          //                     [95.4731080978172, 59.09642414252956],
          //                     [95.50688245259778, 58.02170674740586],
          //                     [95.60807222499122, 56.95123077084904],
          //                     [95.7762780651951, 55.88922089248461],
          //                     [96.01083614160407, 54.83986838011633],
          //                     [96.31082076064995, 53.807314548706934],
          //                     [96.67504802009127, 52.79563441650003],
          //                     [97.10208048133465, 51.80882062278476],
          //                     [97.59023284234813, 50.850767670772555],
          //                     [98.13757858877838, 49.92525655777228],
          //                     [98.74195759702275, 49.03593985332112],
          //                     [99.40098465925017, 48.18632728416138],
          //                     [100.11205889672688, 47.3797718829525],
          //                     [100.87237402429648, 46.6194567553829],
          //                     [101.67892942550536, 45.90838251790619],
          //                     [102.52854199466509, 45.24935545567877],
          //                     [103.41785869911627, 44.6449764474344],
          //                     [104.34336981211653, 44.09763070100415],
          //                     [105.30142276412874, 43.609478339990666],
          //                     [106.28823655784402, 43.18244587874729],
          //                     [107.2999166900509, 42.818218619305966],
          //                     [108.33247052146031, 42.518234000260094],
          //                     [109.3818230338286, 42.28367592385112],
          //                     [110.44383291219302, 42.115470083647246],
          //                     [111.51430888874984, 42.014280311253806],
          //                     [112.58902628387354, 41.98050595647323],
          //                     [113.66374367899722, 42.014280311253806],
          //                     [114.73421965555406, 42.115470083647246],
          //                     [115.79622953391848, 42.28367592385112],
          //                     [116.84558204628678, 42.518234000260094],
          //                     [117.87813587769617, 42.818218619305966],
          //                     [118.88981600990306, 43.18244587874729],
          //                     [119.87662980361833, 43.609478339990666],
          //                     [120.83468275563055, 44.09763070100415],
          //                     [121.76019386863082, 44.64497644743441],
          //                     [122.64951057308198, 45.24935545567877],
          //                     [123.49912314224171, 45.90838251790619],
          //                     [124.3056785434506, 46.61945675538289],
          //                     [125.06599367102018, 47.37977188295248],
          //                     [125.7770679084969, 48.18632728416138],
          //                     [126.43609497072433, 49.0359398533211],
          //                     [127.04047397896868, 49.925256557772265],
          //                     [127.58781972539893, 50.85076767077254],
          //                     [128.0759720864124, 51.808820622784744],
          //                     [128.5030045476558, 52.79563441650003],
          //                     [128.86723180709714, 53.80731454870693],
          //                     [129.167216426143, 54.839868380116314],
          //                     [129.40177450255197, 55.88922089248461],
          //                     [129.56998034275585, 56.95123077084903],
          //                     [129.6711701151493, 58.02170674740586],
          //                     [129.70494446992987, 59.09642414252955],
          //                 ],
          //                 ],
          //             },
          //             properties: {
          //                 type: "Circle",
          //                 style: {
          //                 fill: {
          //                     fillColor: "rgba(254,30,22,0.4)",
          //                     opacity: 0.4,
          //                 },
          //                 stroke: {
          //                     strokeColor: "rgba(254,30,22,1)",
          //                     strokeWidth: 2,
          //                     strokeLineDash: null,
          //                 },
          //                 image: {
          //                     type: "",
          //                     image: {
          //                     fill: {
          //                         fillColor: "rgba(255,204,51,1)",
          //                     },
          //                     points: null,
          //                     radius: 7,
          //                     angle: 0,
          //                     rotateWithView: false,
          //                     },
          //                 },
          //                 },
          //                 points: [
          //                 [112.58902628387354, 59.09642414252956],
          //                 [120.24844214281694, 43.78995478962064],
          //                 ],
          //             },
          //         },
          //     },
          //     ],
          //     selectList: ["东部战区", "矩形1", "圆形2", "北京", "河北省"],
          // },
          // dataView: {
          //     name: 123,
          // },
        };
        // const iframe = this.$refs.myIframe;
        // iframe.contentWindow.postMessage(obj, "*");
      }
      this.mapDataParams = obj
      this.$refs.wizmapMe.mapData = obj;
    },
    // 地图确认按钮
    handlerMapChane(data) {
      this.customizedParams.jsonDate["mapPosition"] = {
        // ...this.mapDataParmas,
        ...data.mapData,
      };
      if (data.mapData.hasOwnProperty("selectList")) {
        this.customizedParams.scope = data.mapData.selectList.join(',') || '' // 战区 范围
      }
      console.log(data, "mapData");
      if (data.hasOwnProperty("close")) {
        // this.iframeStatus = true
        this.iframeClick();
      }
    },
    lmasurlChange(path) {
      console.log(path, "pathChange");
      if (path == "add") {
        this.lmasurlStatus = true;
        this.customizedParams.lmasurl = "";
      } else {
        this.lmasurlStatus = false;
      }
      // this.fileListInif.iframeData = path
    },
    addLmasurlClick() {
      this.customizedParams.lmasurl = this.addLmasurl;
      this.optionsList.splice(this.optionsList.length - 1, 0, { label: this.addLmasurl, value: this.addLmasurl });
      this.lmasurlStatus = false;
      this.addLmasurl = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.my-customization {
  flex: 1;
  // background-color: #fff;
  // overflow-y: auto;
  display: flex;
  .right-content{
    // background-image: url(../../../public/image/border.png);
    // background-size: 100% 100%;
    // background-color: #fff;
    // padding: 10px;
    margin-left: 20px;

  }
  .head-checkbox {
    .el-checkbox {
      margin: 0;
    }
  }
  .title {
    font-size: 14px;
    padding: 0 10px;
    height: 35px;
    font-weight: bold;
    // background-color: #f2f6fc;
    display: flex;
    align-items: center;
    background-image: url(../../../public/image/title-bg.png);
    background-size: 100% 100%;
  }
  .table-list > div:nth-child(1) {
    padding: 10px;
  }
  .table-list,
  .data-list {
    font-size: 14px;
    display: flex;
    color: #333333;
    .table-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      .table-tr {
        flex: 1;
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
        border-top: 1px solid #fff;
        div:nth-child(1) {
          width: 200px;
          padding: 8px 10px;
          // min-height: 160px;
          // background-color: #eee;
          background: linear-gradient(-73deg, #dbe8f8, #f3f8fc);

          // background-image: linear-gradient(to left, #89b7fb, #b1c7fc, #d1d8fc, #ebebfd, #ffffff);
          display: flex;
          align-items: center;
          border-right: 1px solid #fff;
        }
        div:nth-child(2) {
          flex: 1;
          display: flex;
          align-items: center;
          padding: 3px 10px;
          background: #f8f8f9;
        }
      }
    }
  }
  .data-list {
    // border: 1px solid #308CE9;
    > div:nth-child(1) {
      padding: 0;
    }
    .customized-top-right {
      width: 240px;
      display: flex;
      flex-direction: column;
      padding: 0 10px;
      color: #606266;
      > div:nth-child(1) {
        margin-bottom: 10px;
        background-color: #E5F8FF;
      }
      > div:nth-child(2) {
        background-color: #FEF4EB;
      }
      > div {
        flex: 1;
        padding: 0 20px;
        // background-image: url(../../../public/image/juxing.png);
        // background-size: 100% 100%;
        text-align: center;
      }

      .title {
        font-size: 14px;
        background: none;
      }
      .content {
        font-size: 16px;
        color: #000;
      }
    }
  }
  .mapbg{
    background-image: url(../../../public/image/ditubg.png);
    background-size: 100% 100%;
    padding: 5px;
  }
  .map {
    width: 350px;
    height: 300px;
    position: relative;
    .full-screen {
      position: absolute;
      bottom: 10px;
      right: 10px;
      font-size: 12px;
      z-index: 9;
      background-color: #e7e7e7;
      padding: 5px 10px;
      color: #377ffd;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    .site-list {
      width: auto;
      padding: 10px;
      margin-bottom: 3px;
      background-color: #f3f8fc;
    }
  }
  .iframeFalse {
    width: 350px;
    height: 300px;
  }
  .iframeFalse1 {
    width: 845px;
    height: 500px;
  }
  .iframeTrue {
    margin: 0;
    padding: 13px;
    border: 0;
    position: fixed;
    top: 5vh;
    left: 10vw;
    width: 80vw;
    height: calc(100vh - 80px);
    z-index: 1000;
    background-color: #fff;
    background: url("~@/assets/images/tanchudi.png") no-repeat;
    background-size: 100% 100%;
  }
  .data-form {
    // background-color: #fff;
    :deep .el-form-item__content {
      flex: 1;
    }
  }
  .label-span-item {
    display: inline-block;
    color: #606266;
    font-size: 14px;
  }
}
.my-head {
  padding: 15px 40px 10px 40px;
  width: 200px;
  text-align: center;
  font-size: 14px;
  color: #777777;
  background-image: url(../../../public/image/myHeadbg.png);
  background-size: 100% 100%;
  overflow: hidden;
  word-wrap: break-word; /*强制换行*/
  text-overflow: ellipsis; /*隐藏后添加省略号*/
  white-space: nowrap; /*强制不换行*/
  position: relative;
  z-index: 10;
}
.my-head:nth-child(1).action {
  padding: 15px 40px 10px 10px;
  background-image: url(../../../public/image/myHeadbg2.png) !important;
  background-size: 100% 111%;
  background-position-y: -5px;
}
.my-head.action{
    font-size: 15px;
    color: #fff;
    background-image: url(../../../public/image/myHeadbg1.png);
    background-size: 100% 103%;
    position: relative;
    z-index: 400 !important;
}
$z-index-step: 1;
$left-offset-step: 45px;
@for $i from 2 through 300 {
  .my-head:nth-child(#{$i}) {
        z-index: (400 - $i) * $z-index-step;
        left: -($i - 1) * $left-offset-step;
    }
}

// .my-head:nth-child(2) {
//   z-index: 7;
//   left: -45px;
// }
// .my-head:nth-child(3) {
//   z-index: 6;
//   left: -85px;
// }
// .my-head:nth-child(4) {
//   z-index: 5;
//   left: -135px;
// }
// .my-head:nth-child(5) {
//   z-index: 4;
//   left: -175px;
// }
// .my-head:nth-child(6) {
//   z-index: 3;
//   left: -215px;
// }
.my-content {
  background-color: #fff;
  border: 1px solid #5298e8;
  margin-bottom: 10px;
  position: relative;
  box-shadow:  10px 10px 40px #bebebe,  -10px -10px 40px #ffffff;
  &::after{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-image: url(../../../public/image/jiao.png);
    background-size: 100% 100%;
  }
}

.steps {
  width: 100%;
  color: #333333;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  background: #FBFCFF;
  border: 1px solid #F6F6F6;
  padding: 3px 8px;
  >div{
    display: flex;
    align-items: center;
  }
  span{
    display: inline-block;
    width: 3px;
    height: 100%;
    background-color: #FF9D02;
    margin-right: 10px;
  }
  // flex: 1;
  // > div {
  //   text-align: center;
  //   font-size: 14px;
  //   color: #666666;
  //   height: 35px;
  //   line-height: 35px;
  //   background-image: url(../../../public/image/steps.png);
  //   background-size: 100% 100%;
  //   position: relative;
  //   // background-color: #F4F6F8;
  //   &.action {
  //     color: #fff;
  //     // background: #4895ED;
  //     background-image: url(../../../public/image/steps1.png);
  //     background-size: 100% 100%;
  //   }
  // }
  // >i{
  //     position: absolute;
  //     top: -12px;
  //     right: 0;
  //     font-size: 60px;
  // }
}
// .steps:not(:nth-child(1)){
//     >div{
//         background-image: url(../../../public/image/steps.png);
//         background-size: 100% 100%;
//     }
// }
// .steps-tail {
//   justify-content: end;
//   > div {
//     padding: 5px 15px;
//     margin-right: 20px;
//     background: #f4f6f8;
//     border-radius: 4px;
//     font-size: 14px;
//     color: #555555;
//     cursor: pointer;
//   }
//   div:nth-child(2) {
//     background: #e8f1ff;
//     color: #0064de;
//   }
// }

.shici {
  /deep/ .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    .el-checkbox {
      width: auto;
      margin-bottom: 0;
    }
  }
}
::v-deep .el-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  .el-checkbox {
    width: 140px;
    text-align: left;
    font-size: 12px;
    margin: 10px 10px 0 10px;
    overflow: hidden;
  }
}
::v-deep .el-dialog__body {
  padding-top: 10px;
}
::v-deep .el-tabs {
  display: flex;
  flex-direction: column;
  .el-tabs__content {
    flex: 1;
    overflow-y: auto;
  }
}
::v-deep .el-dialog{
    background-color: #F7FBFF;
}
::v-deep .el-dialog__header{
  background: url("@/assets/images/pTitle.png") no-repeat;
  background-size: 100% 100%;
}
::v-deep .el-dialog__header{
    padding: 13px 20px 10px;
}
.time-type{
  ::v-deep .el-form-item__label{
    font-size: 12px;
  }
  ::v-deep .el-input__prefix{
    display: none;
  }
  ::v-deep .el-input--prefix .el-input__inner{
    padding-left: 10px;

  }
}
.footer-button {
  padding: 20px;
  .el-button.el-button--primary {
    color: #fff;
    background: linear-gradient(-24deg, #63cdff, #3d95f7);
    border: 0;
  }
  .el-button {
    background: #f1f7ff;
    border-radius: 4px;
    border: 1px solid #186fd9;
    color: #0064de;
  }
}
.text {
  color: #606266;
  font-size: 14px;
}

.padbg {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0;
  left: 0;
  z-index: 1000;
}
</style>
